<template>
  <div>
    <div v-if="!sub">
      <!-- 操作框 -->
      <el-form class="tableSearch" size="mini">
        <el-form-item>
          <el-button type="primary" v-if='setRole("创建")' @click="routerPush()">新增</el-button>
          <el-button type="primary" v-if='setRole("提交审核")' @click="purchaseAudit('1')">提交审核</el-button>
          <el-button type="primary" v-if='setRole("审核")' @click="purchaseAudit('2')">审核</el-button>
          <el-button type="primary" v-if='setRole("驳回")' @click="purchaseAudit('3')">驳回</el-button>
        </el-form-item>
      </el-form>

      <!-- 搜索框 -->
      <div class="tableSearch">
        <el-form size="mini">
          <el-form-item label="订单状态：" label-width="100px" style="width:200px;">
            <el-select v-model="selectdata.selected" style="width:135px;" placeholder="全部">
              <el-option label="全部" value=""></el-option>
              <el-option v-for="(item, index) in orderStatusArr" :key="index" :label="item" :value="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" label-width="50px">
            <el-input v-model="selectdata.keyword" placeholder="请输入订单号"></el-input>
          </el-form-item>
          <el-form-item label="" label-width="15px">
            <el-button type="primary" @click="orderTable.handleSearch(_getGoodsPurchaseListPage, orderTable.pageData)">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 表格 -->
      <el-table :data="orderTable.tableData" @selection-change="orderTable.handleMultipleSelect">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" label="序号" width="55"></el-table-column>
        <el-table-column prop="purchaseCode" label="采购订单号" align="center"></el-table-column>
        <el-table-column prop="orderDate" :formatter="timestamp" label="单据日期" align="center"></el-table-column>
        <el-table-column prop="supplierName" label="供应商名称" align="center"></el-table-column>
        <el-table-column prop="amount" label="总金额" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.confirmAmount.toFixed(2)}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="statusFlow" label="订单状态" align="center">
          <template slot-scope="scope">
            <span>{{orderStatusArr[scope.row.statusFlow]}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="userName" label="操作员" align="center"></el-table-column>
        <el-table-column align="center" label="操作" width="180">
          <template slot-scope="scope">
            <el-button size="mini" @click="routerPushInfo(scope.row.id, '1')" type="text">查看</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 页码 -->
      <page-unit :pageData="orderTable.pageData" :func="_getGoodsPurchaseListPage"></page-unit>
    </div>
    <div v-else>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import state from "@/util/state";
import util from "@/util";
import { TableHandle } from "@/util/class";
import pageUnit from "@/components/Page";
import {
  updateAuditStatus,
  getGoodsPurchaseListPage
} from "@/api";

export default {
  computed: mapState(["merchantId", "sub", "power"]),
  components: { pageUnit },
  data() {
    return {
      timestamp: state.timestamp,
      orderStatusArr: state.orderStatusArr, // 订单状态
      selectdata: {
        selected: "",
        keyword: ""
      },
      orderTable: new TableHandle()
    };
  },
  mounted() {
    this._getGoodsPurchaseListPage(this.orderTable.pageData.pageSize, 1);
  },
  watch: {
    sub: {
      handler: function(val, oldVal) {
        if (oldVal != null && val == false) {
          this._getGoodsPurchaseListPage(this.orderTable.pageData.pageSize, 1);
        }
      },
      deep: true
    }
  },
  methods: {
    // 分配权限
    setRole(key) {
      return util.selectTitle(this.power, key);
    },

    // 审核相关操作
    purchaseAudit(type) {
      if(this.orderTable.isSelect(2, this, "请先选择采购单据！")) {
        let arr = this.orderTable.multipleSelectTable.map(i => i.id)
        updateAuditStatus({
          purchaseIds: arr.toString(),
          auditStatus: type
        }).then(res => {
          this._getGoodsPurchaseListPage(this.orderTable.pageData.pageSize, 1);
        })
      }
    },

    // 获取表格数据
    _getGoodsPurchaseListPage(pageSize, pageNum) {
      getGoodsPurchaseListPage({
        shopId: this.merchantId,
        statusFlow: this.selectdata.selected,
        purchaseCode: this.selectdata.keyword,
        pageNum: pageNum,
        pageSize: pageSize,
        purchaseType: "1,2" //采购单类型：0-报货，1-采购，2-自采
      }).then(res => {
        this.orderTable.pageData.totalItems = res.data.pageTotal;
        this.orderTable.tableData = res.data.list;
      });
    },

    // 新增
    routerPush() {
      util.routerTo("/order-center/purchase-management/purchase-procurement/purchase-procurementAdd")
    },

    // 查看
    routerPushInfo(id, showTab) {
      util.routerTo("/order-center/purchase-management/purchase-procurement/purchase-procurementDetail", { id: id, showTab: showTab})
    }
  }
};
</script>
